<template>
    <div class="flv-player-container">
        <video ref="videoElement" controls autoplay class="flv-video"></video>
        <div v-if="error" class="error-message">{{ error }}</div>
        <div v-if="loading" class="loading-indicator">加载中...</div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import flvjs from 'flv.js'

const props = defineProps({
    src: {
        type: String,
        required: true
    },
    autoplay: {
        type: Boolean,
        default: true
    },
    muted: {
        type: Boolean,
        default: false
    }
})

const videoElement = ref<HTMLVideoElement | null>(null)
const flvPlayer = ref<flvjs.Player | null>(null)
const loading = ref(false)
const error = ref('')

const initPlayer = () => {
    if (flvjs.isSupported()) {
        const video = videoElement.value
        if (video) {
            // 修改播放器配置
            flvPlayer.value = flvjs.createPlayer({
                type: 'flv',
                url: props.src,
                isLive: true,
                hasAudio: false,
                enableWorker: true,
                stashInitialSize: 128,
                enableStashBuffer: true,  // 启用缓冲区
                stashInitialSize: 512,    // 增大初始缓冲区
                lazyLoad: true,           // 启用懒加载
                lazyLoadMaxDuration: 3,   // 最大缓冲时长
                lazyLoadRecoverDuration: 1 // 恢复缓冲时长
            }, {
                enableAudioTrackIgnore: true
            })

            flvPlayer.value.attachMediaElement(video)
            flvPlayer.value.load()

            loading.value = true

            flvPlayer.value.on(flvjs.Events.ERROR, (err, errType) => {
                console.error('FLV播放错误:', err, errType)
                if (errType === flvjs.ErrorTypes.MEDIA_ERROR) {
                    // 尝试忽略媒体错误继续播放
                    flvPlayer.value?.unload()
                    flvPlayer.value?.attachMediaElement(video)
                    flvPlayer.value?.load()
                } else {
                    error.value = '视频加载失败，请检查网络或视频源'
                    loading.value = false
                }
            })

            // 添加关键帧检测
            flvPlayer.value.on(flvjs.Events.METADATA_ARRIVED, () => {
              console.log('关键帧到达')
              loading.value = false
            })
        }
    } else {
        error.value = '您的浏览器不支持FLV播放'
    }
    // 在initPlayer函数中添加网络状态检测
    flvPlayer.value.on(flvjs.Events.STATISTICS_INFO, (info) => {
      console.log('当前下载速度:', info.speed) // 监控下载速度
    })
}

onMounted(() => {
    initPlayer()
})

onBeforeUnmount(() => {
    if (flvPlayer.value) {
        flvPlayer.value.pause()
        flvPlayer.value.unload()
        flvPlayer.value.detachMediaElement()
        flvPlayer.value.destroy()
        flvPlayer.value = null
    }
})
</script>

<style scoped>
.flv-player-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    /* 防止滚动条 */
}

.flv-video {
    width: 100%;
    background-color: #000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

.error-message {
    color: #ff4d4f;
    text-align: center;
    padding: 10px;
    background: #fff2f0;
    border: 1px solid #ffccc7;
}

.loading-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    background: rgba(0, 0, 0, 0.7);
    padding: 8px 16px;
    border-radius: 4px;
}
</style>